<template>
  <div class="bottom-tab">
    <div class="tab-item" @click="switchTo('/recommend')">
      <img
        :src="
          '/recommend' === $route.path
            ? tabBarImgArr[0].selected
            : tabBarImgArr[0].normal
        "
      />
      <span :class="{ on: '/recommend' === $route.path }">首页</span>
    </div>
    <div class="tab-item" @click="switchTo('/find1')">
      <img
        :src="
          '/find1' === $route.path
            ? tabBarImgArr[1].selected
            : tabBarImgArr[1].normal
        "
      />
      <span :class="{ on: '/find1' === $route.path }">发现</span>
    </div>
    <div class="tab-item" @click="switchTo('/video3')">
      <img
        :src="
          '/video3' === $route.path
            ? tabBarImgArr[2].selected
            : tabBarImgArr[2].normal
        "
      />
      <span :class="{ on: '/video3' === $route.path }">视频</span>
    </div>
    <div class="tab-item" @click="switchTo('/demo1')">
      <img
        :src="
          '/demo1' === $route.path
            ? tabBarImgArr[3].selected
            : tabBarImgArr[3].normal
        "
      />
      <span :class="{ on: '/demo1' === $route.path }">排行榜</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabBarImgArr: [
        //图片切换
        {
          normal: require("../../public/bottom/icon-2.png"),
          selected: require("../../public/bottom/icon-1.png"),
        },
        {
          normal: require("../../public/bottom/icon-4.png"),
          selected: require("../../public/bottom/icon-3.png"),
        },
        {
          normal: require("../../public/bottom/icon-6.png"),
          selected: require("../../public/bottom/icon-5.png"),
        },
        {
          normal: require("../../public/bottom/icon-8.png"),
          selected: require("../../public/bottom/icon-7.png"),
        },
      ],
    };
  },
  methods: {
    switchTo(path) {
      // console.log(this.$router)
      this.$router.replace(path);
    },
  },
};
</script>

<style scoped>
.bottom-tab {
  width: 100%;
  height: 0.5rem;
  background-color: #fff;
  position: fixed;
  left: 0px;
  bottom: 0px;
  display: flex;
  z-index: 999;
}
.tab-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.1rem;
  color: #666;
}
img {
  width: 0.24rem;
  height: 0.24rem;
  margin-bottom: 2px;
}
.on {
  color:#15C5CE;
}
</style>